{% extends 'TopxiaWebBundle:Coin:layout.html.twig' %}
{% block title %}我的学习卡 - {{ parent() }}{% endblock %}

{% set side_nav = 'my-card' %}

{% block main %}
  <div class="es-section h400">

     <div class="section-header"><h3>我的卡包</h3></div>
    {% if card %}
	 <style>
      	.new_kabao_nr{ background-image:url(/img/card.png); height:202px; background-repeat:no-repeat;background-size:100% 100%;}
		.new_kabao{
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;}
@media (min-width: 992px) {
	.new_kabao{float: left;}
	.new_kabao {
    width: 50%;
  }
	}
.kabaoxiangqing{ color:#fff; padding:10px;font-family: "微软雅黑";}
.kabaoxiangqing h5{ font-size:14px;}
.kabaoxiangqing dl{ padding:10px;}
.kabaoxiangqing dl dt{ display:block; float:right;}
.kabaoxiangqing dl dt img{width:100%;}
.kabaoxiangqing dl dd { display:block; float:left;}
.kabaoxiangqing dl dd span {
    font-size: 30px;
    padding-top: 10px;
    display: block;
}
.kabaoxiangqing dl dd em {
    font-size: 45px;
    font-weight: bold;
    padding-top: 10px;
    display: block;
}
.kabaoxiangqing dl dd h6 {
    font-size: 22px;
    padding-left: 10px;
    padding-top: 16px;
    width: 90px;
    height: 66px;
    overflow: hidden;
}
.kabaoxiangqing p{ padding-left:10px;}
.hr_10{height:10px; font-size:1px; line-height:1px; clear:both; width:1px}
@media (max-width: 767px) {.kabaoxiangqing dl dd em{ font-size:30px; font-weight:bold; padding-top:15px; display:block;}
.kabaoxiangqing dl dd h6{font-size:18px; padding-left:10px; padding-top:10px;width:70px;}
.kabaoxiangqing dl dd { display:block; float:left;}
.kabaoxiangqing dl dd span{ font-size:12px; padding-top:20px;}
.kabaoxiangqing dl dt img{width:60%;display:block;float:right;}
.kabaoxiangqing p{ padding-top:10px;font-size:12px;}
}
      </style>
    
      {% for card in card %}
	  <div class="new_kabao" id="category-table">
       <div class="new_kabao_nr kabaoxiangqing">
       		<h5>卡号：{{ card.cardId }}&nbsp;&nbsp;&nbsp;&nbsp; {% if card.category == '0' %} <span style="color:#fff;">通用 {% endif %}
            {% if card.category == '1' %} <span style="color:#fff;">班级 {% endif %}
            {% if card.category == '3' %} <span style="color:#fff;">视频课程 {% endif %}
            {% if card.category == '6' %} <span style="color:blue;">考试题库</span> {% endif %}&nbsp;&nbsp;&nbsp;&nbsp;{% if card.status == '1' %}<span style="color:green">未使用</span>{% endif %}
            {% if card.status == '3' %}<span style="color:red">已使用</span>{% endif %}
            {% if card.status == '4' %}已过期{% endif %}</h5>
            <dl>
            <dt><a href="{% if card.category==0 %}/{% elseif card.category==3 %}/course/explore?tags=3{% elseif card.category==6 %}/course/explore?tags=6{% elseif card.category==1 %}/classroom/explore{% endif %}"><img class="img-responsive" src="/img/button.png" ></a></dt>
            <dd>
            <span>￥</span>
            </dd>
            <dd style="display:block;float:left;">
            <em>{{ card.money }}</em>
            </dd>
            <dd style="display:none">
          {{ card.title }}</dd>

</dl>
<div class="hr_10"></div>
<p>充值日期：{{ card.rechargetime|date('Y-m-d') }}&nbsp;&nbsp;截止日期：{{ card.endtime|date('Y-m-d') }}</p>
       </div>  
        </div>
	  
	  
	  
       
      {% endfor %}
     
	  
    {% else %}
      <div class="empty">没有找到符合条件的学习卡</div>
        
    {% endif %}
  
 </div>
  <script>
 $(document).ready(function() {  
    alert("aaaaaaaaaaa");
    SWFUploadInit();        //初始化Flash上传组件
});
 
window.onload=function(){
  alert("bbbbbbbb");
}

  </script>
{{ web_macro.paginator(paginator) }}		
{% endblock %}